<template>
    <div>
        <el-tree 
        :default-expanded-keys="defaultExpandedKeys"
        node-key="catId"
        :data="data" 
        :props="defaultProps"
        :expand-on-click-node="false"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
            <el-button
                v-if="data.catLevel!=3"
                type="text"
                size="mini"
                @click="category={sort:0};append(data)">
                Append
            </el-button>
            <el-button
                type="text"
                size="mini"
                @click="update(data)">
                Update
            </el-button>
            <el-button
                type="text"
                size="mini"
                v-if="data.categoryEntityList.length==0"
                @click="() => remove(node, data)">
                Delete
            </el-button>
            </span>
        </span>
        </el-tree>


                <!-- Form -->
        <el-dialog title="分类编辑" :visible.sync="dialogFormVisible">
        <el-form :model="category">
            <el-form-item label="分类名称" label-width="120px">
            <el-input v-model="category.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如:组件，工具js，第三方插件jsjson文件，图片文件等等)
//例如:import《组件名称》from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components:{},
    data() {
        return {
            defaultExpandedKeys: [],
            dialogFormVisible: false,
            category: {},
            data: [],
            defaultProps: {
                children: 'categoryEntityList',
                label: 'name',
            }
        };
    },
    //方法集合
    methods:{
        remove(node,data) {
            let ids = [data.catId];
            this.$http({
              url: this.$http.adornUrl(`/product/category/delete`),
              method: 'post',
              data: this.$http.adornData(ids,false)
            }).then(({data})=>{
                if(data.code == 0) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    })
                    this.getDataList();
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        update(data) {
            this.dialogFormVisible = true;
            this.$http({
                url: this.$http.adornUrl(`/product/category/info/${data.catId}`),
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data}) => {
                this.category = data.category
            })
        },
        save() {
            let methodUrl = "save";
            if(this.category.catId) {
                methodUrl = "update";
            }
            this.$http({
              url: this.$http.adornUrl(`/product/category/${methodUrl}`),
              method: 'post',
              data: this.$http.adornData(this.category,false)
            }).then(({data})=>{
                if(data.code == 0) {
                    this.$message({
                        message: "保存成功",
                        type: "success",
                    })
                    this.dialogFormVisible = false;
                    this.getDataList();
                    this.defaultExpandedKeys = [this.category.parentCid]
                } else {
                    this.$message.error('保存失败')
                }
            })
        },
        //编辑弹框
        append(data) {
            this.category.parentCid = data.catId;
            this.category.catLevel = data.catLevel + 1;
            this.dialogFormVisible = true;
        },
        // 获取数据列表
        getDataList () {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl(`/product/category/list`),
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data}) => {
                this.data = data.list
                console.log(data.list)
            })
        }
    },
    //生命周期 -创建完成*（可以访问当前this示例)
    created () {

    },
    activated() {
        this.getDataList();
    },
    //生命周期 -挂载完成(可以访问dom元素)
    mounted () {

    }
}
</script>